<template>
  <div>
    <template v-for="menu in menuList">
      <el-submenu :disabled="menu.disabled" v-if="menu.children.length>0"
                  :index="menu.id+'' " :key="menu.id+''">
        <template slot="title" style="padding-left: 10px">
          <i :class="menu.icon"></i>
          <span slot="title">{{menu.menuName}}</span>
        </template>
        <MenuTree :menuList = "menu.children"></MenuTree>
      </el-submenu>

      <el-menu-item
        v-else
        :disabled="menu.disabled"
        :index="menu.id+''"
        :key="menu.id+''"
        :route="menu.url"

        style="padding-left: 50px;"
      >
        <i :class="menu.icon"></i>
        <span slot="title">{{menu.menuName}}</span>
      </el-menu-item>
    </template>
  </div>

</template>

<script>
export default {
  name: 'MenuTree',
  // 接受父组件传过来的值
  props: ['menuList']
}
</script>

<style scoped>
.el-menu--collapsp span,
.el-menu--collapsp i.el-submeu__icon-arrow{
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  display: inline-block;
}
#app > section > section > aside > ul > div > li.el-submeu.is-opened > ul > div > li.el-menu-item.is-active{
  color: #FFFFFF;
  border: 2px solid #426fb9;
  padding: 3px 28px;
  margin: 5px 20px;
  height: 40px;
  line-height: 30px;
  border-radius: 10px;
  min-width: 0px;
}
#app > section > section > aside > ul > div > li.el-submenu > div > span{
  color: #FFFFFF;
}
</style>
